{% extends "base.html" %}
{% load static %}
{% load render_kinetics %}



{% block title %}Net Reaction #{{ index }} - {{ network.title }}{% endblock %}

{% block navbar_items %}
<li><a href="{% url 'pdep:index' %}">Pressure Dependent Networks</a></li>
<li><a href="{% url 'pdep:network-index' networkKey=networkKey%}">{{ network.title }}</a></li>
<li><a href="{% url 'pdep:network-net-reaction' reaction=index networkKey=networkKey%}">Net Reaction #{{ index }}</a></li>
{% endblock %}

{% block sidebar_items %}
{% include "networkSidebar.html" %}
{% endblock %}

{% block page_title %}Net Reaction #{{ index }} - {{ network.title }}{% endblock %}

{% block extrahead %}
<script src="https://code.highcharts.com/6/highcharts.js"></script>
<script src="{% static 'js/highcharts.theme.js' %}" type="text/javascript"></script>

<script type="text/javascript">
jQuery(document).ready(function() {

    {% if kinetics %}
    var kseries = new Array();
    var kseries2 = new Array();
    {{ kinetics|get_rate_coefficients:user }}
    {% include "kineticsModel.js" %}
    {% endif %}
    
    MathJax.Hub.Queue(function() {
        {% if kinetics %}
        plotKinetics('plotk', kseries);
        plotKineticsVsP('plotkvsP', kseries2);
        {% endif %}
    });

});
</script>
{% endblock %}

{% block page_body %}

<h2>Reaction</h2>

<p>
<table>
    <tr>
        <td class="reactants">{{ reactants|safe }}</td>
        <td class="reactionArrow">{{ arrow|safe }}</td>
        <td class="reactants">{{ products|safe }}</td>
    </tr>
    <tr>
        <td class="reactants">{% for reactant in reaction.reactants %}{{ reactant.label }}{% if not forloop.last %} + {% endif %}{% endfor %}</td>
        <td class="reactionArrow">{{ arrow|safe }}</td>
        <td class="reactants">{% for product in reaction.products %}{{ product.label }}{% if not forloop.last %} + {% endif %}{% endfor %}</td>
    </tr>
</table>
</p>

{% if kinetics %}
<h2>Pressure-Dependent Kinetics</h2>
{{ kinetics|render_kinetics_math:user }}

<div id="plotk" style="width: 500px; height: 400px; margin: auto;"></div>
<div id="plotkvsP" style="width: 500px; height: 400px; margin: auto;"></div>

{% endif %}

{% endblock %}
